import Header from '@/components/Common/Header';
import { Link, Outlet } from 'react-router-dom';
import styled from 'styled-components';

// 创建样式化组件
const Container = styled.div`
  h1 {
    height: 50px;
    margin: 20px 0;
  }
  .container {
    width: 1180px;
    height: 600px;
  }
  .category {
    width: 70px;
    height: 100%;
    > .category-item {
      width: 70px;
      height: 70px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      text-align: center;
      text-decoration: none;
      font-size: var(--font-size-base);
      color: var(--white);
      border-top-left-radius: var(--border-radius-lg);
      border-bottom-left-radius: var(--border-radius-lg);
    }
    .category-item:nth-child(1),
    .category-item:nth-child(5) {
      background-color: var(--primary-color);
    }
    .category-item:nth-child(2),
    .category-item:nth-child(6) {
      background-color: var(--success-color);
    }
    .category-item:nth-child(3) {
      background-color: var(--warning-color);
    }
    .category-item:nth-child(4) {
      background-color: var(--error-color);
    }
  }
  .coms {
    width: calc(1180px - 60px);
    height: 100%;
  }
`;
interface MaterialsViewProps {}
const MaterialsView: React.FC<MaterialsViewProps> = () => {
  return (
    <Container className="">
      <Header />
      <div>
        <h1 className="font-weight-100 text-center m-0 p-0">组件市场</h1>
        <div className="container mc flex">
          <nav className="category mc">
            <Link className="category-item" to="/materials/select-group">
              <div>选择</div>
            </Link>
            <Link className="category-item" to="/materials/input-group">
              <div>文本输入</div>
            </Link>
          </nav>
          {/* 路由出口 */}
          <div className="coms">
            <Outlet />
          </div>
        </div>
      </div>
    </Container>
  );
};

export default MaterialsView;
